﻿<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Sites And Departments
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="CurrentMenuIDContent" runat="server">
    configMenu</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="HeadContent" runat="server">
    <link rel="stylesheet" type="text/css" href="../../Content/jquery-ui-1.8.16.custom.css" />
    <link rel="stylesheet" type="text/css" href="../../Content/jquery.autocomplete.css" />
    <script type="text/javascript" src="../../Scripts/site.js"></script>
    <script type="text/javascript" src="../../Scripts/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="../../Scripts/jquery-ui-1.8.16.custom.min.js"></script>
    <script type="text/javascript" src="../../Scripts/jquery.autocomplete.min.js"></script>
    <script type="text/javascript" src="../../Scripts/jquery.tablesorter.min.js"></script>
    <script type="text/javascript" src="../../Scripts/jquery.tablesorter.pager.js"></script>
    <script src="<%= Url.Content("~/Scripts/jquery.validate.min.js") %>" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#miniTabs").tabs();
        });
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2>
        Define Sites & Departments</h2>
    <table>
        <tr>
            <td align="left" width="100px" class="top">
                Show:<br />
                <br />
                <input type="radio" name="cbxFilterByAssetStatus" value="All" onclick="setFilter('All');"
                    checked="checked" />&nbsp;All<br />
                <input type="radio" name="cbxFilterByAssetStatus" value="Active" onclick="setFilter('Active');" />&nbsp;Active
                Only<br />
                <input type="radio" name="cbxFilterByAssetStatus" value="Inactive" onclick="setFilter('Inactive');" />&nbsp;Inactive<br />
            </td>
            <td width="800px" class="top">
                <div id="miniTabs">
                    <ul class="tabs">
                        <li><a href="#siteTab">Sites</a></li>
                        <li><a href="#departmentTab">Departments</a></li>
                    </ul>
                    <div id="siteTab">
                        <table>
                            <tr>
                                <td class="right">
                                    <% If ViewData("IsSuperUser") IsNot Nothing Then%>
                                    <input type="submit" class="button" value="Add Site" onclick="javascript:addSite(); return false;" />
                                    <% End If%>
                                </td>
                                <td>
                                    &nbsp;
                                </td>
                            </tr>
                            <tr>
                                <td class="top" width="270px" id="siteListContainer">
                                    <% Html.RenderPartial("~/Views/SitesDepartmentSetup/Controls/SiteGrid.ascx", ViewData("SiteList"))%>
                                </td>
                                <td class="top">
                                    <div id="siteDetailContent" class="hidden" style="border: none!important;">
                                        <form id="siteDetailForm" method="get" action="">
                                        <table class="data-table">
                                            <tr>
                                                <th id="siteDetailTitle" colspan="2">
                                                </th>
                                            </tr>
                                            <tr>
                                                <td width="90px">
                                                    Title:
                                                </td>
                                                <td>
                                                    <%= Html.TextBox("txtSiteDesc", Nothing, New With {.class = "text wide-input"})%>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    Status:
                                                </td>
                                                <td>
                                                    <input type="radio" id="cbxSiteActive" name="IsSiteActive" value="1" checked="checked" />&nbsp;Active
                                                    <input type="radio" id="cbxSiteInactive" name="IsSiteActive" value="0" />&nbsp;Inactive
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    Timezone:
                                                </td>
                                                <td>
                                                    <%= Html.DropDownList("TimeZone", "Select...")%>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    Adderss:
                                                </td>
                                                <td>
                                                    <%= Html.TextArea("txtSiteAddr", Nothing, New With {.class = "text wide-input"})%>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="2">
                                                    <input type="submit" class="button right" value="    Cancel    " onclick="javascript:cancel(); return false;" />&nbsp;&nbsp;
                                                    <input type="submit" class="button right" value="    Save    " onclick="javascript:saveSite(); return false;" />&nbsp;&nbsp;
                                                </td>
                                            </tr>
                                        </table>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div id="departmentTab">
                        <table>
                            <tr>
                                <td class="right">
                                    <b>Site:</b>&nbsp;<span id="depSiteContainer">
                                        <%= Html.DropDownList("DDSiteList")%></span>
                                </td>
                                <td lass="left">
                                    <input type="submit" class="button" value="Add Department" onclick="javascript:addDepartment(); return false;" />
                                </td>
                            </tr>
                            <tr>
                                <td class="top" width="270px" id="depListContainer">
                                    <% Html.RenderPartial("~/Views/SitesDepartmentSetup/Controls/DepartmentGrid.ascx", ViewData("SiteList"))%>
                                </td>
                                <td class="top">
                                    <div id="locationDetailContent" class="hidden" style="border: none!important;">
                                        <form id="locationDetailForm" method="get" action="">
                                        <table class="data-table">
                                            <tr>
                                                <th id="locationDetailTitle" colspan="2">
                                                </th>
                                            </tr>
                                            <tr>
                                                <td width="90px">
                                                    Title:
                                                </td>
                                                <td>
                                                    <%= Html.TextBox("txtDepartmentDesc", Nothing, New With {.class = "text wide-input"})%>
                                                    <span id="departmentDescErrMsg" class="error hidden"></span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    Status:
                                                </td>
                                                <td>
                                                    <input type="radio" id="cbxDepartmentActive" name="IsDepartmentActive" value="1"
                                                        checked="checked" />&nbsp;Active
                                                    <input type="radio" id="cbxDepartmentInactive" name="IsDepartmentActive" value="0" />&nbsp;Inactive
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    Adderss:
                                                </td>
                                                <td>
                                                    <%= Html.TextArea("txtDepartmentAddr", Nothing, New With {.class = "text wide-input"})%>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="2">
                                                    <input type="submit" class="button right" value="    Cancel    " onclick="javascript:cancel(); return false;" />&nbsp;&nbsp;
                                                    <input type="submit" class="button right" value="    Save    " onclick="javascript:saveDepartment(); return false;" />&nbsp;&nbsp;
                                                </td>
                                            </tr>
                                        </table>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </td>
            <td class="top">
            </td>
        </tr>
        <tr>
            <td colspan="3">
                &nbsp;
            </td>
        </tr>
    </table>
    <% Html.RenderPartial("~/Views/History/Controls/History.ascx")%>
    <script type="text/javascript">
        var selectedSiteID = <%: ViewData("SelectedSiteID")%>;
        var selectedDepartmentID = 0;
        var selectedSiteName = "";
        var filter = "All";

        $(document).ready(function () {

            $("#searchDepartment").autocomplete('<%: Url.Action("SearchDepartmentByName") %>', {
                matchContains: true,
                minChars: 1,
                cacheLength: 0,
                maxItemsToShow: 15,
                dataType: 'json',
                parse: function (data) {
                    var parsed = [];
                    if (data === null) {
                        data = [];
                    }
                    for (var i = 0; i < data.length; i++) {
                        parsed[parsed.length] = {
                            data: data[i],
                            value: data[i].ID,
                            result: data[i].Description
                        };
                    }
                    return parsed;
                },
                formatItem: function (item) {
                    return item.Description;
                },
                width: 300
            }).result(function (e, data) {
                setFilter(data.ID);
                $("#searchDepartment").val(data.Description);
            });

            $('#searchDepartment').focus(function () {
                if ($(this).attr('value') == '' || $(this).attr('value') == 'Search Departments...') {
                    $(this).attr('value', '');
                }
                $(this).css('color', '#000');

            });
            $('#searchDepartment').blur(function () {
                if ($(this).attr('value') == '') {
                    $(this).attr('value', 'Search Departments...');
                    $(this).css('color', '#777');
                }
            });

            $("select#DDSiteList").change(function () {
                changeDepartmentsSite();
            });

            $('#txtDepartmentDesc, #txtDepartmentAddr').keydown(function(event) {
              if (event.keyCode == '13') {
                 event.preventDefault();
                 saveDepartment();
               }
            });

            $('#txtDepartmentDesc').keyup(function(event) {
                checkDepartmentExists();
            });
            

            $('#txtSiteDesc, #txtSiteAddr, #TimeZone').keydown(function(event) {
              if (event.keyCode == '13') {
                 event.preventDefault();
                 saveSite();
               }
            });

        });


        function addSite() {
            selectedSiteID = 0;
            selectedSiteName = "";
            $("#siteDetailTitle").text("Add new Site");
            $("#txtSiteDesc").val("");
            hideAllDetails();
            $("#siteDetailContent").show();
            $("#txtSiteDesc").focus();
        }

        function selectSite(id, desc, isActive, timeZoneID) {
            hideAllDetails();
            var addr = $("#siteAddr_" + id).html();
            $("#slRow_" + selectedSiteID).removeClass("selected-site-node");
            selectedSiteID = id;
            selectedSiteName = desc;
            clearSiteSelection();
            $("#siteRow_" + id).addClass("selected");
            $("#siteDetailTitle").html("Edit Site: <I>" + desc + "</I>");
            $("#txtSiteDesc").val(desc);
            $("#txtSiteAddr").val(addr);
            $("#TimeZone").val(timeZoneID);
            $("#siteDetailContent").show();

            if (isActive === true) {
                $("#cbxSiteActive").click();
            }
            else {
                $("#cbxSiteInactive").click();
            }
            $("#txtSiteDesc").focus();
        }

       function clearSiteSelection() {
            $('#siteTable tbody tr').each(function (index) {
                $(this).removeClass("selected");
            });
        }

        function selectDepartment(id, desc, isActive) {
        
            hideAllDetails();
            var addr = $("#locAddr_" + id).html();
            $("#locationNode_" + selectedDepartmentID).removeClass("selected-location-node");
            selectedDepartmentID = id;

            clearDepartmentSelection();
            $("#departmentRow_" + id).addClass("selected");

            $("#txtDepartmentAddr").val(addr);
            $("#txtDepartmentDesc").val(desc);
            $("#locationDetailTitle").html("Edit Department: <I>" + desc + "</I>");
            $("#locationDetailContent").show();

            if (isActive === true) {
                $("#cbxDepartmentActive").click();
            }
            else {
                $("#cbxDepartmentInactive").click();
            }

            $("#txtDepartmentDesc").focus();
            checkDepartmentExists();
        }

        function clearDepartmentSelection() {
            $('#departmentTable tbody tr').each(function (index) {
                $(this).removeClass("selected");
            });
        }

        function addDepartment() {
            if (selectedSiteID === 0)
                alert("Please, select a site to add new location.");
            else {
                selectedDepartmentID = 0;
                hideAllDetails();
                $("#txtDepartmentDesc").val("");
                $("#locationDetailTitle").html("Add new Department to Site: <I>" + selectedSiteName + "</I>");
                $("#locationDetailContent").show();
                $("#txtDepartmentDesc").focus();
                checkDepartmentExists();
            }
        }

        function setFilter(value) {
            showLoading("miniTabs", true);
            filter = value;
            jQuery.ajax({
                type: 'POST',
                data: { filter: filter },
                url: '<%= Html.AttributeEncode(Url.Action("SetFilter")) %>',
                success: function (result) {
                    $('#siteListContainer').html(result);
                    hideLoading("miniTabs");
                    setSiteFilter(value);
                }
            });
        }

        function setSiteFilter(value) {
            showLoading("miniTabs", true);
            filter = value;
            jQuery.ajax({
                type: 'POST',
                data: { filter: filter },
                url: '<%= Html.AttributeEncode(Url.Action("SetSiteFilter")) %>',
                success: function (result) {
                    $('#depSiteContainer').html(result);
                    hideLoading("miniTabs");
                }
            });
        }

        function saveSite() {
            if (siteValidate() === true) {
                var desc = $("#txtSiteDesc").val();
                var addr = $("#txtSiteAddr").val();
                var bActive = $('#cbxSiteActive').is(':checked');
                var timeZoneID = $("#TimeZone").val();
                $("#siteAddr_" + selectedSiteID).html(addr);
                jQuery.ajax({
                    type: 'POST',
                    data: { id: selectedSiteID, desc: desc, addr: addr, isActive: bActive, timeZoneID: timeZoneID, filter: filter },
                    url: '<%= Html.AttributeEncode(Url.Action("SaveSite")) %>',
                    success: function (result) {
                        loadSiteList();
                        $('#siteListContainer').html(result);
                        hideAllDetails();
                    }
                });
            }
        }

        function loadSiteList()
        {
            jQuery.ajax({
                type: 'POST',
                data: { filter: filter },
                url: '<%= Html.AttributeEncode(Url.Action("SetSiteFilter")) %>',
                success: function (result) {
                    $('#depSiteContainer').html(result);
                    $("select#DDSiteList").change(function () {
                        changeDepartmentsSite();
                    });
                }
            });
        }

        function saveDepartment() {
            if (locationValidate() === true && depExist === false) {
                var desc = $("#txtDepartmentDesc").val();
                var bActive = $('#cbxDepartmentActive').is(':checked');
                var addr = $("#txtDepartmentAddr").val();
                $("#locAddr_" + selectedDepartmentID).html(addr);
                jQuery.ajax({
                    type: 'POST',
                    data: { siteID: selectedSiteID, id: selectedDepartmentID, desc: desc, addr: addr, isActive: bActive, filter: filter },
                    url: '<%= Html.AttributeEncode(Url.Action("SaveDepartment")) %>',
                    success: function (result) {
                        $('#depListContainer').html(result);
                        hideAllDetails();
                    }
                });
            }
        }

        var depExist = false;
        function checkDepartmentExists()
        {
            var depDesc = $("#txtDepartmentDesc").val();
            jQuery.ajax({
                type: 'POST',
                data: { siteID: selectedSiteID, curDepID:selectedDepartmentID, depDesc: depDesc },
                url: '<%= Html.AttributeEncode(Url.Action("CheckDepartmentExists")) %>',
                dataType: "json",
                success: function (result) {
                    if (result.Result != "ok") {
                        $("#departmentDescErrMsg").html(result.Message).fadeIn(1000);
                        depExist = true;
                    }
                    else if($("#departmentDescErrMsg").html()!="")
                    {
                        depExist = false;
                        $("#departmentDescErrMsg").html("").fadeOut(500);
                    }
                }
            });
        }

        function cancel() {
            hideAllDetails();
        }

        function hideAllDetails() {
            $("#locationDetailContent").hide();
            $("#siteDetailContent").hide();
        }

        function siteValidate() {
            return $('#siteDetailForm').validate({
                rules: {
                    "txtSiteDesc": { required: true },
                    "TimeZone": { required: true }
                },
                messages: {
                    "txtSiteDesc": " required field.",
                    "TimeZone": " required field."
                }
            }).form();
        }

        function locationValidate() {
            return $('#locationDetailForm').validate({
                rules: {
                    "txtDepartmentDesc": { required: true }
                },
                messages: {
                    "txtDepartmentDesc": " required field."
                }
            }).form();
        }


        function changeDepartmentsSite()
        {
            var id = $("#DDSiteList").val();
            jQuery.ajax({
                        type: 'POST',
                        data: { siteID: id },
                        url: '<%= Html.AttributeEncode(Url.Action("GetDepartmentsBySiteID")) %>',
                        success: function (result) {
                            $('#depListContainer').html(result);
                            selectedSiteID =  id;
                            hideAllDetails();
                        }
                    });
        
        }
    </script>
</asp:Content>
